<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <div id="page">
        <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
        <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@include file='header.jsp'%>
            <div id="contents">
    <!--            Nome, CPF, dtNasc, sexo, endereço completo, e-mail-->
                <h1>Cadastrar Cliente</h1>
                <form action="Controladora?action=CadastrarCliente" method="POST" data-validate="parsley">
                    <input type="hidden" value="${cliente.id}" name="idCliente" />
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>Nome:</label>
                        </div>
                        <div class="_70">
                            <input type="text" maxlength="300" data-required="true" name="nome" value="${cliente.nome}" style="width:350px;"/><br/>
                        </div>
                    </div>
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>CPF:</label>
                        </div>
                        <div class="_70">                    
                            <input type="text" class="cpf" data-required="true" value="${cliente.cpf}" name="cpf"/><br/>
                        </div>                   
                    </div>
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>Data de Nascimento:</label>
                        </div>
                        <div class="_70">
                            <fmt:formatDate value="${cliente.dtNasc}" pattern="dd/MM/yyyy" var="dataFormatada"/>
                            <input type="text" style="width: 80px;" data-required="true" value="${dataFormatada}" class="txtData" name="dtNasc"/><div class="aviso" style="text-align: left">Ex.: (dd/mm/aaaa)</div>
                        </div>
                    </div>
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>Sexo:</label>
                        </div>
                        <div class="_70">
                            <c:if test="${cliente.sexo == 'M'}">
                                <input type="radio" checked data-required="true" name="sexo" value="M"/> Masculino<br/>
                                <input type="radio" data-required="true" name="sexo" value="F"/> Feminino<br/>
                            </c:if>
                            <c:if test="${cliente.sexo == 'F'}">
                                <input type="radio" data-required="true" name="sexo" value="M"/> Masculino<br/>
                                <input type="radio" checked data-required="true" name="sexo" value="F"/> Feminino<br/>
                            </c:if>
                            <c:if test="${cliente.sexo != 'F' && cliente.sexo != 'M'}">
                                <input type="radio" data-required="true" name="sexo" value="M"/> Masculino<br/>
                                <input type="radio" data-required="true" name="sexo" value="F"/> Feminino<br/>
                            </c:if>
                        </div>
                    </div>
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>Endereço:</label>
                        </div>
                        <div class="_70">
                            <input type="text" maxlength="400" data-required="true" value="${cliente.endereco}" name="endereco" style="width:400px;"/><div class="aviso" style="text-align: left">Ex.: (Logradouro, número, complemento, bairro, cidade, estado)</div>
                        </div>
                    </div>
                    <div class="columns30_70">
                        <div class="_30 alinhadoDireita">
                            <label>Email:</label>
                        </div>
                        <div class="_70">
                            <input type="text" maxlength="300" data-required="true" value="${cliente.email}" data-type="email" name="email" style="width:250px;"/><br/>
                        </div>
                    </div>
                    <input type="submit" onclick="if(!confirm('Tem certeza que deseja salvar o cliente?')) return false;" name="enviar" value="Salvar" class="btnpqn" style=" margin-left: 555px; width: 71px;"/>
                </form>   
                <br /><br />
                <table border="2" class="tabela alnCentro">
                            <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>CPF</th>
                                    <th>Data de Nascimento</th>
                                    <th>Email</th>
                                    <th>Alterar</th>
                                    <th>Excluir</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:if test="${listaCliente != null}">
                                    <c:forEach var="cliente" items="${listaCliente}">
                                        <tr>
                                            <td><c:out value="${cliente.nome}" /></td>
                                            <td><c:out value="${cliente.cpf}" /></td>
                                            <td><fmt:formatDate value="${cliente.dtNasc}" pattern="dd/MM/yyyy" /></td>
                                            <td><c:out value="${cliente.email}" /></td>
                                            <td> 
                                                <form method="POST" action="Controladora?action=BuscarCliente">
                                                    <input type="hidden" name="idEdita" value="${cliente.id}" />
                                                    <input type="image" src="images/ico_edit.png" id="edit"/>
                                                </form>
                                            </td>
                                            <td> 
                                                <form method="POST" action="Controladora?action=DeletarCliente">
                                                    <input type="hidden" name="idDel" value="${cliente.id}" />
                                                    <input type="image" onclick="if(!confirm('Confirma a exclusão deste cliente?')) return false;" src="images/ico_del.png" id="edit"/>
                                                </form>
<!--                                        <a href='#'><img class='edit' src='images/ico_del.png'/> </a> -->
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:if>
                            </tbody>
                        </table>
            </div>
            <c:if test="${ msg != null}">
                <script type="text/javascript">
                    var msg = '${msg}';
                    alert(msg);
                </script>
            </c:if>
        <%@include file='footer.jsp'%>
    </div>
</body>
</html>
